<template>
  <span v-if="user.isLogin" class="user-prefix">
    <!-- <span class="icon setting" @click="handleClick" /> -->
    <a-popover
      trigger="hover"
      :get-popup-container="triggerNode => triggerNode.parentNode"
    >
      <template slot="content">
        <msg-list />
      </template>
      <span class="icon bells">
        <!-- <span class="unread">10</span> -->
      </span>
    </a-popover>
  </span>
</template>

<script>
import { mapState } from 'vuex'
import MsgList from '@/pages/index/views/center/msg-list'

export default {
  name: 'UserPrefix',

  components: { MsgList },

  data() {
    return {}
  },

  computed: {
    ...mapState('global', {
      user: 'user'
    })
  },

  methods: {
    handleClick(e) {
      window.location = '/my/center/info'
    }
  }
}
</script>

<style lang="scss" scoped>
.user-prefix {
  display: inline-block;
  vertical-align: top;

  .icon {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    cursor: pointer;

    .unread {
      position: absolute;
      margin-left: 20px;
      display: inline-block;
      line-height: 16px;
      font-size: 12px;
      color: #fff;
      background: #d9001b;
      border-radius: 50%;
      padding: 0 2px;
    }
  }

  .setting {
    background: url('~@/assets/images/icon/gsd-icon-setting.svg');
    background-size: contain;
  }

  .bells {
    background: url('~@/assets/images/icon/gsd-icon-bells.svg');
    background-size: 24px;
    background-position: center;
  }

  /deep/ .ant-popover-inner-content {
    padding: 0 !important;
  }
}
</style>
